<template>
	<el-main>
		<el-row :gutter="20">
			<el-col :md="12">
				<el-alert
					title="普通表单验证"
					type="success"
					:closable="false">
				</el-alert>
				<el-form ref="form1" :model="form1" :rules="rules1">
					<el-form-item label="用户名" prop="username">
						<el-input v-model="form1.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="form1.password"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit('form1')">
							表单验证
						</el-button>
						<el-button type="warning" native-type="reset">
							重置表单
						</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :md="12">
				<el-alert
					title="自定义表单验证方法（提供了常用的表单验证方法，插件位于src/utils/validate.js）"
					type="error"
					:closable="false">
				</el-alert>
				<el-form ref="form2" :model="form2" :rules="rules2">
					<el-form-item label="手机号码" prop="phone">
						<el-input v-model="form2.phone"></el-input>
					</el-form-item>
					<el-form-item label="电子邮箱" prop="email">
						<el-input v-model="form2.email"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit('form2')">
							表单验证
						</el-button>
						<el-button type="warning" native-type="reset">
							重置表单
						</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { validatePhone,validateEMail } from '../../utils/validate.js'
	export default {
		name: 'Form',
		data() {
			return {
				form1: {},
				rules1: {
					username: [
						{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }
					]
				},
				form2: {},
				rules2: {
					phone: [
						{ required: true, message: '请输入手机号码', trigger: ['blur', 'change'] },
						{ validator: validatePhone, trigger: ['blur', 'change'] }
					],
					email: [
						{ required: true, message: '请输入电子邮箱', trigger: ['blur', 'change'] },
						{ validator: validateEMail, trigger: ['blur', 'change'] }
					]
				}
			}
		},
		methods: {
			// 提交
			onSubmit(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						console.log("ok");
					}
				});
			}
		}
	}
</script>
